<template>
    <div class="mainItem">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>
        <div class="mainItem-head">收费数据分析</div>
        <div class="chartV">
            <div id="mc1V" ref="mc1V"></div>
        </div>
        <div class="allPrices">
            <div class="allPrice">
                ￥
                <CountTo class="allPriceNum" :decimals="2" :startVal='0' :endVal='allPrice' :duration='3000' />
            </div>
            <div class="allPricet">收费总额</div>
        </div>
    </div>
</template>

<script>
import {fetchGet} from '@/api/request'
import CountTo from 'vue-count-to'
export default {
    props: ['hIndex', 'dIndex'],
    components: {
        CountTo
    },
    data() {
        return {
            loading: false,
            mc1V: null,
            allPrice: 29284512.12
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.mc1V = this.$echarts.init(this.$refs.mc1V);
            this.chartInit();
        });
    },
    watch: {
        hIndex: function (infoData) {
            this.chartInit();
        },
        dIndex: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            this.loading = true;
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '收费类型： <br/>{b} : {c} 元 ( {d}% )'
                },
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                legend: {
                    type: 'scroll',
                    bottom: 0,
                    itemWidth: 20,
                    itemHeight: 10,
                    itemGap: 6,
                    icon: 'circle',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    pageIconColor: '#fff',
                    pageIconInactiveColor: '#888',
                    left: 0,
                    pageTextStyle: {
                        color: '#fff',
                        fontSize: 10,
                    }
                },
                series: [
                    {
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 4
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        type: 'pie',
                        radius: ['30%', '80%'],
                        avoidLabelOverlap: false,
                        center: ['50%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 2
                        },

                        data: [
                            { value: 32139, name: '支付宝' },
                            { value: 51215, name: '微信' },
                            { value: 12212, name: '银联' },
                            { value: 25221, name: '医保' },
                        ]
                    }
                ]
            };

            this.mc1V.setOption(option)
            this.loading = false;
        }
    }
}
</script>

<style lang="scss" scoped>
.mainItem {
    width: 1000px;
    height: 300px;
    background-image: url('../../assets/cbg.png');
    background-size: 104% 108%;
    background-position: -16px -6px;

    .chartV {
        height: 220px;
        width: 220px;
        position: absolute;
        top: 70px;
        left: 80px;

        #mc1V {
            width: 100%;
            height: 100%;
        }
    }

    .allPrices {
        position: absolute;
        left: 360px;
        top: 120px;
        text-shadow: 0 0 8px #000;

        .allPrice {
            color: #d5628a;
            font-size: 32px;
            font-family: PMZD;
            font-weight: bold;

            .allPriceNum {
                font-family: PMZD;
                font-size: 60px;
                letter-spacing: 5px;
                width: 500px;
                min-width: 500px;
                text-align: center;
                display: inline-block;
                text-shadow: 0 0 8px #00000022;
                color: #DAEDFF;
                background: linear-gradient(to bottom, #ffbdd4, #cea9ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .allPricet {
            color: #97a4d1;
            width: 100%;
            margin-top: 10px;
            font-size: 22px;
            font-family: SJYHJT;
            font-weight: bold;
            letter-spacing: 10px;
            text-align: center;
        }
    }
}
</style>